<template>
	<view class="main">
		<!-- #ifndef MP-TOUTIAO -->
		<!-- <nav-bar ref="navRef" title="支付"></nav-bar> -->
		<!-- #endif -->
		<view class="content">
			<view class="card">
				<view class="origin_img" @tap="viewOrigin('')">
					<image src="https://img.ixintu.com/download/jpg/201911/e25b904bc42a74d7d77aed81e66d772c.jpg" mode="aspectFill"></image>
				</view>

				<view class="imgs">
					<view class="first_img" @tap.stop="viewTargetImg(1)">
						<image src="https://pic1.zhimg.com/v2-a58fa2ab84be291418da2652805f8270_b.jpg" mode="aspectFill"></image>
					</view>
					<!-- <view class="">
						<image src="https://pic1.zhimg.com/v2-a58fa2ab84be291418da2652805f8270_b.jpg" mode=""></image>
					</view>
					<view class="">
						<image src="https://pic1.zhimg.com/v2-a58fa2ab84be291418da2652805f8270_b.jpg" mode=""></image>
					</view> -->
				</view>
				<view class="card_name flex_bw">
					<view class="u-line-1">功能名称功能名称</view>
					<view class="">06.26 15:00</view>
				</view>
			</view>

			<view class="card card_a">
				<view class="imgs">
					<view class="first_img" @tap.stop="viewTargetImg(1)">
						<image src="https://pic1.zhimg.com/v2-a58fa2ab84be291418da2652805f8270_b.jpg" mode="aspectFill"></image>
					</view>
					<view class="imgs_right">
						<view class="ir_top" @tap.stop="viewTargetImg(2)">
							<image src="https://pic1.zhimg.com/v2-a58fa2ab84be291418da2652805f8270_b.jpg" mode=""></image>
						</view>
						<!-- 	<view class="ir_bottom">
							<image src="https://pic1.zhimg.com/v2-a58fa2ab84be291418da2652805f8270_b.jpg" mode=""></image>
						</view> -->
					</view>
				</view>
				<view class="card_name flex_bw">
					<view class="u-line-1">功能名称功能名称</view>
					<view class="">06.26 15:00</view>
				</view>
			</view>

			<view class="card card_a card_b">
				<view class="imgs">
					<view class="first_img" @tap.stop="viewTargetImg(1)">
						<image src="https://pic1.zhimg.com/v2-a58fa2ab84be291418da2652805f8270_b.jpg" mode="aspectFill"></image>
					</view>
					<view class="imgs_right">
						<view class="ir_top" @tap.stop="viewTargetImg(2)">
							<image src="https://pic1.zhimg.com/v2-a58fa2ab84be291418da2652805f8270_b.jpg" mode="aspectFill"></image>
						</view>
						<view class="ir_bottom" @tap.stop="viewTargetImg(3)">
							<image src="https://pic1.zhimg.com/v2-a58fa2ab84be291418da2652805f8270_b.jpg" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="card_name flex_bw">
					<view class="u-line-1">功能名称功能名称</view>
					<view class="">06.26 15:00</view>
				</view>
			</view>
		</view>

		<u-loadmore v-show="loading" status="loading" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: true,
			dataList: [],
			total: 0,
			pageSize: 1
		};
	},
	onLoad() {},
	onReachBottom() {
		if (!this.loading && this.total > this.dataList.length) {
			console.log("加载");
		}
	},
	methods: {
		viewOrigin(src) {
			uni.previewImage({
				urls: [src]
			});
		},
		viewTargetImg(idx) {
			uni.previewImage({
				urls: [],
				current: idx
			});
		}
	}
};
</script>

<style lang="less" scoped>
.main {
	width: 100vw;
	min-height: 100vh;
	background-color: #f7f7f7;
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom) / 2);
}
.content {
	padding: 38rpx 24rpx 0 24rpx;
	:last-child {
	}
}
.card {
	width: 704rpx;
	height: 480rpx;
	border-radius: 16rpx;
	overflow: hidden;
	background-color: #fff;
	margin-bottom: 24rpx;
	position: relative;
	.origin_img {
		position: absolute;
		left: 16rpx;
		top: 16rpx;
		width: 92rpx;
		height: 92rpx;
		border-radius: 20rpx;
		overflow: hidden;
		z-index: 2;
	}

	.imgs {
		height: 396rpx;
	}
	.first_img {
		width: 100%;
		height: 100%;
	}
	.card_name {
		color: #999999;
		font-size: 24rpx;
		height: calc(100% - 396rpx);
		padding: 0 30rpx;

		:nth-child(1) {
			font-weight: bold;
			color: #333333;
			font-size: 28rpx;
			width: 448rpx;
		}
	}

	.imgs_right {
		display: none;
	}
	.ir_bottom {
		display: none;
	}
}
.card.card_a {
	.imgs {
		display: flex;
		justify-content: space-between;
	}
	.first_img {
		width: 466rpx;
	}
	.imgs_right {
		width: 234rpx;
		display: inline-block;
		height: 100%;
		.ir_top {
			height: 100%;
		}
	}
}
.card.card_a.card_b {
	.imgs {
		display: flex;
		justify-content: space-between;
	}
	.first_img {
		width: 466rpx;
	}
	.imgs_right {
		width: 234rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		.ir_top {
			height: calc(50% - 2rpx);
		}
		.ir_bottom {
			display: inline-block;
			height: calc(50% - 2rpx);
		}
	}
}
</style>
